<script setup>
import { ADD_API, USER_PAGE_API } from '@/apis/usercrud'
import { showMsg } from '@/utils/showMsg';
import { ref } from 'vue'
const dialogStatus = ref(false)
const queryData = ref({ username: '' })
const addInfo = ref({
  username: '',
  password: ''
})
const resetForm = () => addInfo.value = {username: '',password: ''}
const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 4, max: 10, message: '用户名长度在4到10位之间', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 18, message: '密码长度在6到18位之间', trigger: 'blur' }
  ]
}

const handleQuery = async () => {
  const res = await USER_PAGE_API(1,10,queryData.value)
  console.log(res)
}
const handleResetQueryData = () => (queryData.value.username = '')
const showDialog = () => {
  dialogStatus.value = true
  resetForm()
}
const hideDialog = () => (dialogStatus.value = false)
const addApi = async () => await ADD_API(addInfo.value)
const handleAdd = () => {
  addApi()
  hideDialog()
  showMsg('添加成功', 'success')
}
</script>
<template>
  <el-card>
    <span>用户账号</span>
    <el-input style="width: 240px;" v-model="queryData.username"></el-input>
    <el-button type="primary" round style="margin-left: 100px;" @click="handleQuery">搜索</el-button>
    <el-button type="warning" round @click="handleResetQueryData">重置</el-button>
    <el-button type="success" round @click="showDialog">新增</el-button>
  </el-card>
  <!-- add dialog -->
  <el-dialog v-model="dialogStatus" title="新增" width="500" align-center>
    <el-form :model="addInfo" :rules="rules">
      <el-form-item prop="username">
        <User style="width: 20px;" /><el-input placeholder="用户名" style="width: 60%;" v-model="addInfo.username"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <Check style="width: 20px;margin-top: 20px;" /><el-input placeholder="密码" style="width: 60%;margin-top: 20px;" v-model="addInfo.password" type="password" show-password></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="hideDialog">取消</el-button>
        <el-button type="primary" @click="handleAdd">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style scoped>
.el-input {
  margin-left: 10px;
}
.el-form-item {
  font-size: 20px;
}
</style>